<template>
    <div class="newmusic" style="margin-top: 60px;">
        <el-divider content-position="left">
            <span style="font-weight: 600;">最新音乐</span>
        </el-divider>
        <div class="newmusic_container">
            <div class="newmusic_item" v-for="item in newmusics" @dblclick="Playsong(item.id)">
                <el-image :src="item.picUrl" lazy />
                <div style="margin-left: 10px;font-size: 12px;">
                    <h1>{{ item.name }}</h1>
                    <h1 style="font-size: 12px; margin-top: 8px;">{{ item.song.artists[0].name }}</h1>
                </div>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import type { NewMusicResult } from "@/models/discover"
import { GetNewMusicInfo } from '@/api/api.ts';
import { usePlaySongStore } from '@/store/playsong.ts';
const PlaySongUrl = usePlaySongStore();
const newmusics = ref<NewMusicResult>([])
onMounted(() => {
    getNewmusic()
})
const getNewmusic = async () => {
    await GetNewMusicInfo().then(res => {
        newmusics.value = res.data.result
    })
}
const Playsong = (id: number) => {
    PlaySongUrl.isHave(id)
}
</script>
<style lang="scss" scoped>
.newmusic_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 3列，每列平均分配空间 */
    grid-template-rows: auto auto auto;
    /* 3行，高度根据内容自动调整 */
    gap: 10px;
    /* 格子之间的间隔 */

}

.newmusic_item {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;

    .el-image {
        width: 70px;
        height: 70px;
        border-radius: 8px;
        margin-bottom: 5px;
    }

}

.newmusic_item:hover {
    background-color: rgba(240, 240, 240);
}
</style>